<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>奉化市诗篇网络科技有限公司-诗篇在线建站系统-演示</title>
<style type="text/css">
body{
	font-size: 12px;
}
a:link{text-decoration: none;}
div#box,div#box0,div#box1{width: 800px;padding: 20px;margin:10px auto;
    background:#E6E6E6;color:#000}
h1{
	font-size: 14px;color: #208BE1
}
input.btn {
  font-size:12px;
  border:1px solid;
  cursor: pointer;
}
.slide-out-div {
  padding: 20px;
  width: 250px;
  background: #ccc;
  border: 1px solid #29216d;
}
#help-content,#toc{
margin-bottom: 30px;
}

#showtoc{
	cursor:pointer;
} 

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.2.6.9.js"></script>
<script type="text/javascript" src="niftycube.js"></script>
<script src="/aaayjcsxdl/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript">
var acache = {};
var tocfunc = function(alink){
	$('#toc').hide();
	if(acache[alink.id]){
		$('#help-content').html(acache[alink.id].content);
		$('#help-content').hide();
		$('#help-content').slideDown('slow');
		return;
	}
	var aid = alink.id.substring(1);
	$.ajax({
		type:"GET",
		url:"/javascriptdm",
		dataType:"json",
		data:"j={obname:'article',obid:" + aid + ",fn:'',params:[]}",
		success:function(result){
			var article = result.response.data;
			acache["a" + article.id] = article;
			$('#help-content').html(article.content);
			$('#help-content').hide();
			$('#help-content').slideDown('slow');
		}
	});
};

$(document).ready(function(){
	
	$('#showtoc').click(function(){$('#toc').show();$('#help-content').hide();});
	var section = {getArticles:function(){
		$.ajax({
			type:"GET",
			url:"/javascriptdm",
			dataType:"json",
			data:"j={obname:'section',obid:" + this.id +  ",fn:'articles',params:[]}",
			success:function(result){
				this.articles = result.response.data;
				$(this.articles).each(function(){
					$('<p><a href="#" id="a' + this.id + '" onClick="tocfunc(this);return false;">' + this.title +'</a></p>').appendTo($('#toc'));
				});
				
				$('.slide-out-div').tabSlideOut({
					tabHandle: '.handle',                     //class of the element that will become your tab
					pathToTabImage: '/aaayjcsxdl/images/help_tab.gif', //path to the image for the tab //Optionally can be set using css
					imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
					imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
					tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
					speed: 300,                               //speed of animation
					action: 'click',                          //options: 'click' or 'hover', action to trigger animation
					topPos: '20px',                          //position from the top/ use if tabLocation is left or right
					leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
					fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
				});
			}
		});
	}};
	
	var articles;
	
	var setCurrentSection = function(sectionName){
		$.ajax({
			type:"GET",
			url:"/javascriptdm",
			dataType:"json",
			data:"j={obname:'site',obid:-1,fn:'findSection',params:['" + sectionName + "']}",
			success:function(result){
				$.extend(section, result.response.data);
				section.getArticles();
			}
		});
	};
	
	setCurrentSection("/帮助文件");
	
	$('#loading').ajaxStart(function(){$(this).show();});
	$('#loading').ajaxStop(function(){$(this).hide();});
	

		Nifty("div#box0","big");
		Nifty("div#box","big");
		Nifty("div#box1","big");
		$('#codeForm').submit(function() { 
		    var options = {
					   type: "POST",
					   url: "/cmsdemo",
					   dataType:"html",
//					   data: {ftlTpl:$('#codeArea').val()},
					   success: function(html){
							$('#resultShow').html(html);
					   }
					   };
		    $(this).ajaxSubmit(options); 
		    // return false to prevent normal browser submit and page navigation 
		    return false; 
		});
		
		$.ajax({
			   type: "GET",
			   url: "/cmsdemo",
			   dataType:"json",
			   data: "",
			   success: function(optionArray){
				   $.each(optionArray,function(index,value){
					   $('<option>').val(value).text(value).appendTo('#codeSelector');
				   });
			   }
		});
		
		$('#codeSelector').change(function() {
			if(!$(this).val())return;
			$.ajax({
				   type: "GET",
				   url: "/cmsdemo",
				   data: "ftlname=" + $(this).val(),
				   success: function(msg){
					   $('#codeArea').val(msg)
				   }
			});
		});

		
	});
</script>
</head>
<body>
	<div id="box0">
		<h1>诗篇建站系统演练,你需要知道<a href="http://freemarker.sourceforge.net/" target="_blank">Freemarker</a></h1>
	</div>
	<div id="box">
		<h1>运行结果：</h1>
		<img id="loading" alt="loading..." src="/aaayjcsxdl/images/loading_16x16.gif" style="display: none;">
		<div id="resultShow"></div>
	</div>
	
	<div id="box1">
		<form action="" id="codeForm">
				<input type="hidden" name="bianmachecker" value="我是utf8"/>
				<label for="codeSelector">选择示例代码</label>
					<select id="codeSelector">
						<option value=""></option>
					</select>
				<label for="codeArea">也可以自己输入代码:</label>
				<textarea rows="8" cols="80" id="codeArea" name="ftlTpl"></textarea>
				<p></p>
			<input type="submit" name="submit" value="查看结果" class="btn"/>
		</form>
	</div>

	     <div class="slide-out-div">
            <a class="handle" href="http://link-for-non-js-users.html">Content</a><span id="showtoc">目录</span>
            <h3>帮助文件</h3>
            <div id = "toc"></div>
            <div id= "help-content"></div>
        </div>
        
</body>
</html>
